<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Text Decoration Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="testing" name="csswg-work-status">
  <meta content="CR" name="w3c-status">
  <meta content="This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-CR" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/css-text-decor-3/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-text-decor-3_dev/css-text-decor-3" type="text/javascript"></script>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Text Decoration Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://www.w3.org/TR/1970/CR-css-text-decor-3-19700101/">https://www.w3.org/TR/1970/CR-css-text-decor-3-19700101/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
     <dt>Editor's Draft:
     <dd><a href="https://drafts.csswg.org/css-text-decor-3/">https://drafts.csswg.org/css-text-decor-3/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/" rel="prev">https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/</a>
     <dd><a href="https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/" rel="prev">https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/</a>
     <dd><a href="https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/" rel="prev">https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/</a>
     <dd><a href="https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" rel="prev">https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/</a>
     <dt>Test Suite:
     <dd><a href="http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/</a>
     <dt>Issue Tracking:
     <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/10">Tracker</a>
     <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-text-decor-3">GitHub Issues</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="45369"><a class="p-name fn u-email email" href="mailto:kojiishi@gmail.com">Koji Ishii</a> (<span class="p-org org">Google</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-text-decor-3/Overview.bs">GitHub Editor</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication.
		Other documents may supersede this document.
		A list of current W3C publications and the latest revision of this technical report
		can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a></em> </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> as a Candidate Recommendation. This document is intended to become a W3C Recommendation.
	This document will remain a Candidate Recommendation at least until <time class="status-deadline" datetime="2019-08-31">31 August 2019</time> in order
	to ensure the opportunity for wide review. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-text-decor” in the title,
	preferably like this:
	“[css-text-decor] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> Publication as a Candidate Recommendation does not imply endorsement by the W3C
	Membership. This is a draft document and may be updated, replaced or
	obsoleted by other documents at any time. It is inappropriate to cite this
	document as other than work in progress. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p> For changes since the last draft,
	see the <a href="#changes">Changes</a> section. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk">
   <p>The following features are at-risk, and may be dropped during the CR period: </p>
   <ul>
    <li>The ability to place both emphasis marks and ruby on the same base text.
   </ul>
   <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module Interactions</span></a>
      <li><a href="#values"><span class="secno">1.2</span> <span class="content"> Values</span></a>
      <li><a href="#terms"><span class="secno">1.3</span> <span class="content">Terminology</span></a>
     </ol>
    <li>
     <a href="#line-decoration"><span class="secno">2</span> <span class="content"> Line Decoration: Underline, Overline, and Strike-Through</span></a>
     <ol class="toc">
      <li><a href="#text-decoration-line-property"><span class="secno">2.1</span> <span class="content"> Text Decoration Lines: the <span class="property">text-decoration-line</span> property</span></a>
      <li><a href="#text-decoration-style-property"><span class="secno">2.2</span> <span class="content"> Text Decoration Style: the <span class="property">text-decoration-style</span> property</span></a>
      <li><a href="#text-decoration-color-property"><span class="secno">2.3</span> <span class="content"> Text Decoration Color: the <span class="property">text-decoration-color</span> property</span></a>
      <li><a href="#text-decoration-property"><span class="secno">2.4</span> <span class="content"> Text Decoration Shorthand: the <span class="property">text-decoration</span> property</span></a>
      <li><a href="#text-underline-position-property"><span class="secno">2.5</span> <span class="content"> Text Underline Position: the <span class="property">text-underline-position</span> property</span></a>
     </ol>
    <li>
     <a href="#emphasis-marks"><span class="secno">3</span> <span class="content"> Emphasis Marks</span></a>
     <ol class="toc">
      <li><a href="#text-emphasis-style-property"><span class="secno">3.1</span> <span class="content"> Emphasis Mark Style: the <span class="property">text-emphasis-style</span> property</span></a>
      <li><a href="#text-emphasis-color-property"><span class="secno">3.2</span> <span class="content"> Emphasis Mark Color: the <span class="property">text-emphasis-color</span> property</span></a>
      <li><a href="#text-emphasis-property"><span class="secno">3.3</span> <span class="content"> Emphasis Mark Shorthand: the <span class="property">text-emphasis</span> property</span></a>
      <li><a href="#text-emphasis-position-property"><span class="secno">3.4</span> <span class="content"> Emphasis Mark Position: the <span class="property">text-emphasis-position</span> property</span></a>
     </ol>
    <li><a href="#text-shadow-property"><span class="secno">4</span> <span class="content"> Text Shadows: the <span class="property">text-shadow</span> property</span></a>
    <li>
     <a href="#painting"><span class="secno">5</span> <span class="content"> Painting Text Decorations</span></a>
     <ol class="toc">
      <li><a href="#painting-order"><span class="secno">5.1</span> <span class="content"> Painting Order of Text Decorations</span></a>
      <li><a href="#overflow"><span class="secno">5.2</span> <span class="content"> Overflow of Text Decorations</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno"></span> <span class="content"> Appendix A: Acknowledgements</span></a>
    <li><a href="#default-stylesheet"><span class="secno"></span> <span class="content"> Appendix B: Default UA Stylesheet</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content">Appendix C:
Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-2018"><span class="secno"></span> <span class="content"> Changes since the <span>July 2018 Candidate Recommendation</span></span></a>
      <li><a href="#changes-2013"><span class="secno"></span> <span class="content"> Changes since the <span>August 2013 Candidate Recommendation</span></span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
      <li><a href="#cr-exit-criteria"><span class="secno"></span> <span class="content"> CR exit criteria</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This subsection is non-normative.</em></p>
   <p>This module covers text decoration, i.e. decorating the glyphs
	of the text once typeset according to font and typographic rules.
	(See <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> and <a data-link-type="biblio" href="#biblio-css-fonts-3">[CSS-FONTS-3]</a>.)
	Such features are traditionally used not only for purely decorative purposes,
	but also in some cases to show emphasis, for honorifics,
	and to indicate editorial changes such as insertions, deletions, and misspellings.</p>
   <p>CSS Levels 1 and 2 only defined very basic <a href="#line-decoration">line decorations</a> (underlines, overlines, and strike-throughs)
	appropriate to Western typographical traditions.
	Level 3 of this module adds the ability to change
	the color, style, position, and continuity of these decorations,
	and also introduces <a href="#emphasis-marks">emphasis marks</a> (traditionally used in East Asian typography),
	and <a href="#text-shadow-property">shadows</a> (which were proposed then deferred from Level 2).</p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaces and extends the text-decorating
	features defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> chapter 16.</p>
   <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
	Value types not defined in this specification are defined in CSS Values &amp; Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
	Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
	For readability they have not been repeated explicitly.</p>
   <h3 class="heading settled" data-level="1.3" id="terms"><span class="secno">1.3. </span><span class="content">Terminology</span><a class="self-link" href="#terms"></a></h3>
   <p>The terms <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="character"><a href="https://www.w3.org/TR/css-text-3/#grapheme-cluster">character</a></dfn>, <dfn data-dfn-type="dfn" data-noexport id="letter"><a href="https://www.w3.org/TR/css-text-3/#letter">letter</a><a class="self-link" href="#letter"></a></dfn>, and <dfn data-dfn-type="dfn" data-noexport id="content-language"><a href="https://www.w3.org/TR/css-text-3/#content-language">content language</a><a class="self-link" href="#content-language"></a></dfn> as used in this specification are defined in <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a>.
	Other terminology and concepts used in this specification are defined
	in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> and <a data-link-type="biblio" href="#biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]</a>.</p>
   <h2 class="heading settled" data-level="2" id="line-decoration"><span class="secno">2. </span><span class="content"> Line Decoration: Underline, Overline, and Strike-Through</span><a class="self-link" href="#line-decoration"></a></h2>
   <p>The following properties describe line decorations that are added to the content of an element.
	When specified on or propagated to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box">inline box</a>,
	that <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#css-box" id="ref-for-css-box">box</a> becomes a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="decorating-box">decorating box</dfn> for that decoration,
	applying the decoration to all its <a data-link-type="dfn" href="https://www.w3.org/TR/css3-break/#fragment" id="ref-for-fragment">fragments</a>.
	The decoration is then further propagated to any <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#in-flow" id="ref-for-in-flow">in-flow</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-level" id="ref-for-block-level">block-level</a> boxes that split the inline
	(see <a href="https://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>).
	When specified on or propagated to a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container">block container</a> that establishes an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a>,
	the decorations are propagated to an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#css-anonymous" id="ref-for-css-anonymous">anonymous</a> inline box that wraps all the <span id="ref-for-in-flow①">in-flow</span> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> children of the <span id="ref-for-block-container①">block container</span>.
	When specified on or propagated to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container">ruby container</a>,
	the decorations are propagated only to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-box" id="ref-for-ruby-base-box">ruby base</a>.
	For all other box types,
	the decorations are propagated to all in-flow children.</p>
   <p class="note" role="note"> Note that text decorations are not propagated to any out-of-flow descendants,
		nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
		They are also not propagated to inline children of inline boxes,
		although the decoration is <em>applied</em> to such boxes. </p>
   <p>Underlines, overlines, and line-throughs are drawn only for <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#non-replaced" id="ref-for-non-replaced">non-replaced</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box①">inline boxes</a>,
	and are drawn across all text (including white space, letter spacing, and word spacing)
	except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line. <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#atomic-inline" id="ref-for-atomic-inline">Atomic inlines</a>, such as images and inline blocks, are not decorated.
	Margins, borders, and padding of the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box">decorating box</a> are always skipped,
	however the margins, border, and padding of descendant <span id="ref-for-inline-box②">inline boxes</span> are not.</p>
   <p class="note" role="note"> Note that CSS 2.1 required skipping margins, borders, and padding always.
		In this level, by default only the margins, borders, and padding of the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box①">decorating box</a> are skipped.
		In the future CSS2.1 may be updated to match this new default.
		Also, control over decorating leading/trailing spaces is expected in Level 4,
		and will be applied by default to the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-ins-element" id="ref-for-the-ins-element">ins</a></code> and <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/edits.html#the-del-element" id="ref-for-the-del-element">del</a></code> elements. </p>
   <p>UAs <em>may</em> interrupt underlines and overlines where the line would cross glyph ink
	and to some distance to either side of the glyph outline;
	this behavior is not controllable in this level,
	but will be further defined in Level 4.
	Line-throughs must remain continuous, however.</p>
   <div class="figure">
     <img alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline." src="images/decoration-skip-ink.png" title="Skipping Descenders When Drawing an Underline"> 
    <p class="caption">Skipping Glyph Ink </p>
   </div>
   <p>When the UA interrupts underlines or overlines at glyph boundaries,
	the shape of the line at that boundary should
	follow the shape of the glyph.</p>
   <div class="note" role="note">
     Note, this specification intentionally does not mandate a particular method
		for “following the shape” of the glyph
		so that UAs can take appropriate measures to handle
		aesthetic and performance considerations.
		For example,
		a UA could assume square line endings below a certain size threshold
		for performance reasons;
		or use trapezoidal endings to approximate curves,
		especially on thinner line decorations.
		In terms of aesthetic considerations,
		the UA might also consider what happens when the glyph boundary
		intersects only part of the line thickness
		or is slanted close to the horizontal—<wbr>following the curve exactly
		could result in typographically-awkward wisps of underline.
		Whether to show the line within enclosed areas of a glyph is yet
		another consideration. 
    <div class="figure">
      <img alt="Take, for example, the word “goal” with an underline striking through the bottom loop of the “g”.
			            Depending on the position and thickness of the underline,
			            we might see the entire thickness of the underline, or only part of it within the “g”.
			            This example shows a masked-out underline in two positions.
			            In the left pair the underline passes through the center of the bowl of the “g”:
			            the full thickness of the underline shows through the center,
			            filling it.
			            In the right pair the underline is slightly lower,
			            and thus the portion of the underline within the “g” can only show a partial thickness." src="images/skip-ink-wisp.png" title="Wispy Leftovers of a Masked-Out Underline"> 
     <p class="caption"> Hiding the portion of the underline within the bowl gives a cleaner look to the type,
			while the curved ends of the underline outside it
			suggest the continuity of the underline through the letter
			by hugging its outer contour. </p>
    </div>
   </div>
   <p>Relatively positioning a descendant moves all text decorations
	applied to it along with the descendant’s text; it does not affect
	calculation of the decoration’s initial position on that line.
	The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> property, <a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a>, filters, and other graphical transformations
	likewise affect text decorations as part of the text they’re drawn on,
	even if the decorations were specified on an ancestor box,
	and do not affect the calculation of their initial positions or thicknesses.
	(In the case of line decorations drawn over an atomic inline
	or across the margins/borders/padding of a non-replaced inline box,
	they are analogously associated with the affected atomic inline / non-replaced inline box
	rather than with the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box②">decorating box</a>.)</p>
   <div class="example" id="example-d6d0ccd7">
    <a class="self-link" href="#example-d6d0ccd7"></a> In the following style sheet and document fragment: 
<pre>blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }
</pre>
<pre>&lt;blockquote>
 &lt;p>
  &lt;span>
   Help, help!
   &lt;em> I am under a hat! &lt;/em>

   &lt;cite> —GwieF &lt;/cite>
  &lt;/span>
 &lt;/p>
&lt;/blockquote>
</pre>
    <p>...the underlining for the blockquote element is propagated to an
		anonymous inline box that surrounds the span element, causing
		the text "Help, help!" to be blue, with the blue underlining from
		the anonymous inline underneath it, the color being taken from the
		blockquote element. The <code>&lt;em>text&lt;/em></code> in the em block is also underlined, as it is in an in-flow block to
		which the underline is propagated. The final line of text is fuchsia,
		but the underline underneath it is still the blue underline from the
		anonymous inline element. <img alt="Sample rendering of the above underline example" src="images/underline-example.png"> This diagram shows the boxes involved in the example above. The
		rounded aqua line represents the anonymous inline element wrapping
		the inline contents of the paragraph element, the rounded blue line
		represents the span element, and the orange lines represent the
		blocks.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> Line decorations are propagated through the box tree,
	not through inheritance,
	and thus have no effect on descendants
	when specified on an element with <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display: contents</a>.</p>
   <h3 class="heading settled" data-level="2.1" id="text-decoration-line-property"><span class="secno">2.1. </span><span class="content"> Text Decoration Lines: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line">text-decoration-line</a> property</span><a class="self-link" href="#text-decoration-line-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-decoration-line">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-line">text-decoration-line</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ underline <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> overline <span id="ref-for-comb-any①">||</span> line-through <span id="ref-for-comb-any②">||</span> blink ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no (but see prose, above) 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Specifies what line decorations, if any, are added to the element.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-none">none<a class="self-link" href="#valdef-text-decoration-line-none"></a></dfn> 
    <dd> Neither produces nor inhibits text decoration. 
    <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-underline">underline<a class="self-link" href="#valdef-text-decoration-line-underline"></a></dfn> 
    <dd> Each line of text is underlined. 
    <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-overline">overline<a class="self-link" href="#valdef-text-decoration-line-overline"></a></dfn> 
    <dd> Each line of text has a line over it (i.e. on the opposite
		  side from an underline). 
    <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-line-through">line-through<a class="self-link" href="#valdef-text-decoration-line-line-through"></a></dfn> 
    <dd> Each line of text has a line through the middle. 
    <dt><dfn class="css" data-dfn-for="text-decoration-line" data-dfn-type="value" data-export id="valdef-text-decoration-line-blink">blink<a class="self-link" href="#valdef-text-decoration-line-blink"></a></dfn> 
    <dd> The text blinks (alternates between visible and invisible).
		  Conforming user agents may simply not blink the text.
		  Note that not blinking the text is one technique to satisfy <a href="https://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.
		  This value is <strong>deprecated</strong> in favor of Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>. 
   </dl>
   <p class="note" role="note"><span>Note:</span> In <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>, <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position">text-underline-position</a> can cause the underline and overline to switch sides.
	This allows the position of underlines to key off of language-specific preferences
	automatically.</p>
   <h3 class="heading settled" data-level="2.2" id="text-decoration-style-property"><span class="secno">2.2. </span><span class="content"> Text Decoration Style: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style">text-decoration-style</a> property</span><a class="self-link" href="#text-decoration-style-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-decoration-style">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-style">text-decoration-style</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">solid <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> double <span id="ref-for-comb-one②">|</span> dotted <span id="ref-for-comb-one③">|</span> dashed <span id="ref-for-comb-one④">|</span> wavy 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>solid 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the style of the line(s) drawn for
	text decoration specified on the element. Values have the
	same meaning as for the <a href="https://www.w3.org/TR/css-backgrounds-3/#the-border-style">border-style
	properties</a> <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]</a>. <span class="css">wavy</span> indicates a wavy line.</p>
   <p>The style of text decorations must remain the same on all decorations originating from a given element,
	even if descendant boxes have different specified styles.</p>
   <h3 class="heading settled" data-level="2.3" id="text-decoration-color-property"><span class="secno">2.3. </span><span class="content"> Text Decoration Color: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color">text-decoration-color</a> property</span><a class="self-link" href="#text-decoration-color-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-decoration-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration-color">text-decoration-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>currentcolor 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>This property specifies the color of text decoration (underlines
	overlines, and line-throughs) set on the element with <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line①">text-decoration-line</a>.</p>
   <p>The color of text decorations must remain the same on all decorations originating from a given element,
	even if descendant boxes have different specified colors.</p>
   <h3 class="heading settled" data-level="2.4" id="text-decoration-property"><span class="secno">2.4. </span><span class="content"> Text Decoration Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> property</span><a class="self-link" href="#text-decoration-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-decoration">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-decoration">text-decoration</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line②">&lt;'text-decoration-line'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> <a class="production" data-link-type="propdesc" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style①">&lt;'text-decoration-style'></a> <span id="ref-for-comb-any④">||</span> <a class="production" data-link-type="propdesc" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color①">&lt;'text-decoration-color'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>This property is a shorthand for setting <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line③">text-decoration-line</a>, <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color②">text-decoration-color</a>, and <a class="property" data-link-type="propdesc" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style②">text-decoration-style</a> in one declaration.
	Omitted values are set to their initial values. A <a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration①">text-decoration</a> declaration that omits both the <span class="property" id="ref-for-propdef-text-decoration-color③">text-decoration-color</span> and <span class="property" id="ref-for-propdef-text-decoration-style③">text-decoration-style</span> values is backwards-compatible
	with CSS Levels 1 and 2.</p>
   <div class="example" id="example-81012497">
    <a class="self-link" href="#example-81012497"></a> The following example underlines unvisited links with a solid blue
		underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs. 
<pre>link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* <a href="https://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
}
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> The shorthand purposefully omits the <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position①">text-underline-position</a> property,
	which is a language/writing-system–dependent setting that keys off the content,
	so that it can cascade and inherit independently
	from the (uninherited) stylistic settings of the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration②">text-decoration</a> shorthand.</p>
   <h3 class="heading settled" data-level="2.5" id="text-underline-position-property"><span class="secno">2.5. </span><span class="content"> Text Underline Position: the <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position②">text-underline-position</a> property</span><a class="self-link" href="#text-underline-position-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-underline-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-underline-position">text-underline-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> [ under <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> [ left <span id="ref-for-comb-one⑥">|</span> right ] ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property sets the position of an underline specified on the element.
	(It does not affect underlines specified by ancestor elements.)
	If <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right">right</a> is specified alone, <a class="css" data-link-type="maybe" href="#underline-auto" id="ref-for-underline-auto">auto</a> is also implied.</p>
   <div class="example" id="example-7303f01e">
    <a class="self-link" href="#example-7303f01e"></a> The following example styles modern Chinese, Japanese, and Korean
		texts with the appropriate underline positions in both horizontal
		and vertical text: 
<pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }
</pre>
   </div>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-auto">auto</dfn> 
    <dd>
      The user agent may use any algorithm to determine the
			underline’s position; however it must be placed at or under
			the alphabetic baseline. 
     <p class="note" role="note"><span>Note:</span> It is suggested that the default underline position
			be close to the alphabetic baseline,
			unless that would either cross subscripted (or otherwise lowered) text
			or draw over glyphs from Asian scripts such as Han or Tibetan
			for which an alphabetic underline is too high:
			in such cases, shifting the underline lower
			or aligning to the em box edge as described for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under">under</a> may be more appropriate.</p>
     <div class="figure">
       <img alt="In a typical Latin font, the underline is positioned slightly
				         below the alphabetic baseline, leaving a gap between the line
				         and the bottom of most Latin letters, but crossing through
				         descenders such as the stem of a &apos;p&apos;." src="images/underline-position-alphabetic.png" title="text-underline-position: alphabetic"> 
      <p class="caption">A typical “alphabetic” underline is positioned just below the alphabetic baseline </p>
     </div>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-under">under</dfn> 
    <dd>
      The underline is positioned <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#under" id="ref-for-under">under</a> the element’s text content.
			In this case the underline usually does not cross the descenders.
			(This is sometimes called “accounting” underline.)
			This value can be combined with <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left①">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right①">right</a> if a particular side is preferred in vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode">typographic modes</a>. 
     <div class="figure">
       <img alt="In a typical Latin font, the underline is far enough
			           below the text that it does not cross the bottom of a &apos;g&apos;." src="images/underline-position-under.png" title="text-underline-position: under"> 
      <p class="caption"><a class="css" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position③">text-underline-position: under</a> </p>
     </div>
     <div class="example" id="example-95685877">
      <a class="self-link" href="#example-95685877"></a> Because <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position④">text-underline-position</a> inherits, and is not reset
				by the <a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration③">text-decoration</a> shorthand, the following example
				switches the document to use <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under①">under</a> underlining, which can
				be more appropriate for writing systems  with long, complicated
				descenders. It is also often useful for mathematical or chemical
				texts that use many subscripts. 
<pre>:root { text-underline-position: under; }</pre>
     </div>
     <p class="note" role="note"><span>Note:</span> The <span class="css">under</span> value does not guarantee
			that the underline will not conflict with glyphs,
			as some fonts have descenders or diacritics
			that extend below the font’s descent metrics.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-left">left</dfn> 
    <dd> In vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①">typographic modes</a>, the underline is aligned as for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under②">under</a>, except it is always aligned to the left edge of the text.
			If this causes the underline to be drawn on the "over" side of
			the text, then an overline also switches sides and is drawn on
			the "under" side. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-underline-position" data-dfn-type="value" data-export id="underline-right">right</dfn> 
    <dd> In vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode②">typographic modes</a>, the underline is aligned as for <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under③">under</a>, except it is always aligned to the right edge of the text.
			If this causes the underline to be drawn on the "over" side of
			the text, then an overline also switches sides and is drawn on
			the "under" side. 
   </dl>
   <div class="figure" id="fig-text-underline-position">
    <table>
     <tbody>
      <tr>
       <td> <img alt="In mixed Japanese-Latin vertical text, &apos;text-underline-position: left&apos;
					          places the underline on the left side of the text." src="images/underline-position-left.png" title="text-underline-position: left"> 
       <td> <img alt="In mixed Japanese-Latin vertical text, &apos;text-underline-position: right&apos;
					          places the underline on the right side of the text." src="images/underline-position-right.png" title="text-underline-position: right"> 
      <tr>
       <td><a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left②">left</a> 
       <td><a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right②">right</a> 
    </table>
    <p class="caption">In vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode③">typographic modes</a>, the <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑤">text-underline-position</a> values <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left③">left</a> and <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right③">right</a> allow placing the underline on either
			side of the text. (In horizontal <span id="ref-for-typographic-mode④">typographic modes</span>, both values are
			treated as <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under④">under</a>.) </p>
   </div>
   <p>The exact position and thickness of line decorations is UA-defined in this level.
	However, for underlines and overlines
	the UA must use a single thickness and position on each line
	for the decorations deriving from a single <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box③">decorating box</a>.</p>
   <div class="figure">
     <img alt="A single underline drawn under varying font sizes and vertical positions must be a single line." src="images/underline-single.png"> vs. <img alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect." src="images/underline-broken.png"> 
    <p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code> </p>
   </div>
   <div class="note" role="note">
     Note, since line decorations can span elements with varying font sizes and
		vertical alignments, the best position for a line decoration is not
		necessarily the ideal position dictated by the <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box④">decorating box</a>.
		For example, an overline positioned to a small font
		will effectively become a line-through if the element contains text in a significantly larger font-size.
		Even for underlines, if the text is not aligned to the alphabetic baseline
		(for example, in vertical typesetting styles,
		text is aligned by its central baseline by default <a data-link-type="biblio" href="#biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]</a>)
		an underline will cut through descendant text of a larger font-size.
		UA consideration of descendant content will therefore result in better typography. 
    <div class="figure">
      <img alt src="images/leftline-cross.png"> <img alt src="images/leftline-under.png"> 
     <p class="caption"> Due to the central baseline alignment of vertical text,
		    a left-side underline on small vertical text will cut through the text
		    of a child with a larger font size.
		    The underline is not allowed to be broken,
		    but adjusting its position further to the left
		    properly accommodates all of the underlined text. </p>
    </div>
   </div>
   <p>UAs <em>must</em> adjust line positions
	to match the shifted metrics of <a data-link-type="dfn" href="#decorating-box" id="ref-for-decorating-box⑤">decorating boxes</a> shifted
	with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> values other than <span class="css">baseline</span> <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> or subscripted/superscripted via <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-variant-position" id="ref-for-propdef-font-variant-position">font-variant-position</a> <a data-link-type="biblio" href="#biblio-css-fonts-3">[CSS-FONTS-3]</a>,
	but <em>must not</em> adjust the line position or thickness
	in response to descendants of a <span id="ref-for-decorating-box⑥">decorating box</span> that are so styled.
	This allows superscripts and subscripts to be properly decorated
	(underlined, struck through, etc.)
	but prevents them from distorting or breaking the positioning of such decorations on their ancestors.</p>
   <div class="figure">
     <img alt="An underline for just the superscript &apos;st&apos; in &apos;1st&apos; is drawn just below the superscript,
		             whereas an underline for the entire text is drawn at the appropriate position for full-size text." src="images/underline-superscript.png"> 
    <p class="caption">Example of underline applied to <abbr title="element with &apos;vertical-align&apos; or &apos;font-variant-position&apos; applied">superscripted text</abbr> vs. underline applied to <abbr title="element containing an element with &apos;vertical-align&apos; or &apos;font-variant-position&apos; applied">text containing a superscript</abbr> </p>
   </div>
   <p>Some font formats (such as OpenType) can offer information
	about the appropriate position of a line decoration.
	The UA should use such information
	(such as the underline thickness,
	or appropriate alphabetic underline position)
	from the font wherever appropriate.</p>
   <p class="note" role="note"><span>Note:</span> Typically, OpenType font metrics give the position
	of an <span class="css">alphabetic</span> underline;
	in some cases (especially in CJK fonts),
	it gives the position of a <span class="css">under left</span> underline.
	(In this case, the font’s underline metrics typically
	touch the bottom edge of the em box).
	The UA may but is not required to correct for incorrect font metrics.</p>
   <h2 class="heading settled" data-level="3" id="emphasis-marks"><span class="secno">3. </span><span class="content"> Emphasis Marks</span><a class="self-link" href="#emphasis-marks"></a></h2>
   <p>East Asian documents traditionally use small symbols next to each glyph to emphasize
	a run of text. For example:</p>
   <div class="figure">
     <img alt="Example of emphasis in Japanese appearing over the text" height="39" src="images/text-emphasis-ja.png" width="208"> 
    <p class="caption">Accent emphasis (shown in blue for clarity) applied to Japanese text </p>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis">text-emphasis</a> shorthand, and its <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style">text-emphasis-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color">text-emphasis-color</a> longhands,
	can be used to apply such marks to the text.
	The <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position">text-emphasis-position</a> property, which inherits separately,
	allows setting the emphasis marks’ position with respect to the text.</p>
   <h3 class="heading settled" data-level="3.1" id="text-emphasis-style-property"><span class="secno">3.1. </span><span class="content"> Emphasis Mark Style: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style①">text-emphasis-style</a> property</span><a class="self-link" href="#text-emphasis-style-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-emphasis-style">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-style">text-emphasis-style</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> [ [ filled <span id="ref-for-comb-one⑧">|</span> open ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> [ dot <span id="ref-for-comb-one⑨">|</span> circle <span id="ref-for-comb-one①⓪">|</span> double-circle <span id="ref-for-comb-one①①">|</span> triangle <span id="ref-for-comb-one①②">|</span> sesame ] ] <span id="ref-for-comb-one①③">|</span> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#string-value" id="ref-for-string-value">&lt;string></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-none" id="ref-for-valdef-text-emphasis-style-none">none</a>, a pair of keywords representing the shape and fill, or a string 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property applies emphasis marks to the element’s text.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-none">none</dfn> 
    <dd>No emphasis marks. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-filled">filled</dfn> 
    <dd>The shape is filled with solid color. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-text-emphasis" data-dfn-type="value" data-export id="valdef-text-text-emphasis-open">open</dfn> 
    <dd>The shape is hollow. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-dot">dot<a class="self-link" href="#valdef-text-emphasis-style-dot"></a></dfn> 
    <dd>Display small circles as marks.
			The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-circle">circle</dfn> 
    <dd>Display large circles as marks.
		    The filled circle is U+25CF '●', and the open circle is U+25CB '○'. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-double-circle">double-circle<a class="self-link" href="#valdef-text-emphasis-style-double-circle"></a></dfn> 
    <dd>Display double circles as marks.
		    The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-triangle">triangle<a class="self-link" href="#valdef-text-emphasis-style-triangle"></a></dfn> 
    <dd>Display triangles as marks.
		    The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-sesame">sesame</dfn> 
    <dd>Display sesames as marks.
		    The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-style" data-dfn-type="value" data-export id="valdef-text-emphasis-style-string"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#string-value" id="ref-for-string-value①">&lt;string></a><a class="self-link" href="#valdef-text-emphasis-style-string"></a></dfn> 
    <dd>Display the given string as marks.
		    Authors should not specify more than one <a data-link-type="dfn" href="#character" id="ref-for-character">character</a> in &lt;string>.
		    The UA may truncate or ignore strings consisting of more than one grapheme cluster. 
   </dl>
   <p>If a shape keyword is specified but neither of <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-filled" id="ref-for-valdef-text-emphasis-style-filled">filled</a> nor <a class="css" data-link-type="maybe" href="#valdef-text-text-emphasis-open" id="ref-for-valdef-text-text-emphasis-open">open</a> is
	specified, <span class="css" id="ref-for-valdef-text-emphasis-style-filled①">filled</span> is assumed. If only <span class="css" id="ref-for-valdef-text-emphasis-style-filled②">filled</span> or <span class="css" id="ref-for-valdef-text-text-emphasis-open①">open</span> is specified,
	the shape keyword computes to <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-circle" id="ref-for-valdef-text-emphasis-style-circle">circle</a> in horizontal <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑤">typographic modes</a> and <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-style-sesame" id="ref-for-valdef-text-emphasis-style-sesame">sesame</a> in vertical <span id="ref-for-typographic-mode⑥">typographic modes</span>.</p>
   <p>The marks should be drawn using the element’s font settings
	with the addition of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby" id="ref-for-valdef-font-variant-east-asian-ruby">ruby</a> feature
	and the size scaled down 50%.
	However, since not all fonts have all these glyphs,
	and some fonts use inappropriate sizes for emphasis marks in these code points,
	the UA may opt to use a font known to be good for emphasis marks,
	or the marks may instead be synthesized by the UA.
	Marks must remain upright in vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑦">typographic modes</a>:
	like CJK characters, they do not rotate to match the writing mode.
	The orientation of marks in horizontal <span id="ref-for-typographic-mode⑧">typographic modes</span> of vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a> is undefined in this level
	(but may be defined in a future level if definitive use cases arise).</p>
   <p class="note" role="note"><span>Note:</span> One example of good fonts for emphasis marks is Adobe’s open source <a href="https://github.com/adobe-fonts/kenten-generic">Kenten Generic OpenType Font</a>,
	which is specially designed for the emphasis marks.</p>
   <p>The marks are drawn once for each <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character unit</a>.
	However, emphasis marks are <em>not</em> drawn for:</p>
   <ul>
    <li><a href="https://www.w3.org/TR/css-text-3/#word-separator">Word separators</a> or other <a data-link-type="dfn" href="#character" id="ref-for-character①">characters</a> that
			belong to the Unicode separator classes (Z*).
			(But note that emphasis marks <em>are</em> drawn for a space
			 that combines with any combining characters.) 
    <li>
     Punctuation--specifically,
			any <a data-link-type="dfn" href="#character" id="ref-for-character②">characters</a> that belong to the
			Unicode P* <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#unicode-general-category" id="ref-for-unicode-general-category">general category</a> and
			do not <code>NFKD</code> normalize <a data-link-type="biblio" href="#biblio-uax15">[UAX15]</a> to
			any of the following symbols: 
     <table class="data">
      <tbody>
       <tr>
        <td># 
        <td>U+0023 
        <td>NUMBER SIGN 
       <tr>
        <td>% 
        <td>U+0025 
        <td>PERCENT SIGN 
       <tr>
        <td>‰ 
        <td>U+2030 
        <td>PER MILLE SIGN 
       <tr>
        <td>‱ 
        <td>U+2031 
        <td>PER TEN THOUSAND SIGN 
       <tr>
        <td>٪ 
        <td>U+066A 
        <td>ARABIC PERCENT SIGN 
       <tr>
        <td>؉ 
        <td>U+0609 
        <td>ARABIC-INDIC PER MILLE SIGN 
       <tr>
        <td>؊ 
        <td>U+060A 
        <td>ARABIC-INDIC PER TEN THOUSAND SIGN 
       <tr>
        <td>&amp; 
        <td>U+0026 
        <td>AMPERSAND 
       <tr>
        <td>⁊ 
        <td>U+204A 
        <td>TIRONIAN SIGN ET 
       <tr>
        <td>@ 
        <td>U+0040 
        <td>COMMERCIAL AT 
       <tr>
        <td>§ 
        <td>U+00A7 
        <td>SECTION SIGN 
       <tr>
        <td>¶ 
        <td>U+00B6 
        <td>PILCROW SIGN 
       <tr>
        <td>⁋ 
        <td>U+204B 
        <td>REVERSED PILCROW SIGN 
       <tr>
        <td>⁓ 
        <td>U+2053 
        <td>SWUNG DASH 
       <tr>
        <td>〽️ 
        <td>U+303D 
        <td>PART ALTERNATION MARK 
     </table>
    <li>Characters belonging to the Unicode classes for control codes
			and unassigned characters (Cc, Cf, Cn). 
   </ul>
   <p class="note" role="note"><span>Note:</span> Control over which characters are marked will be added in Level 4.
	(The list of punctuation may also be further refined,
	particularly for non-CJK punctuation.)</p>
   <h3 class="heading settled" data-level="3.2" id="text-emphasis-color-property"><span class="secno">3.2. </span><span class="content"> Emphasis Mark Color: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color①">text-emphasis-color</a> property</span><a class="self-link" href="#text-emphasis-color-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-emphasis-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-color">text-emphasis-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>currentcolor 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>This property specifies the foreground color of the emphasis marks.</p>
   <p class="note" role="note"><span>Note:</span> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentcolor</a> keyword computes to itself
	and is resolved to the value of <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-color/#color0" id="ref-for-color0">color</a> after inheritance is performed.
	This means <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color②">text-emphasis-color</a> by default matches the text <span class="property" id="ref-for-color0①">color</span> even as <span class="property" id="ref-for-color0②">color</span> changes across elements.</p>
   <h3 class="heading settled" data-level="3.3" id="text-emphasis-property"><span class="secno">3.3. </span><span class="content"> Emphasis Mark Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis①">text-emphasis</a> property</span><a class="self-link" href="#text-emphasis-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-emphasis">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis">text-emphasis</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style②">&lt;'text-emphasis-style'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> <a class="production" data-link-type="propdesc" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color③">&lt;'text-emphasis-color'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>This property is a shorthand for setting <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style③">text-emphasis-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color④">text-emphasis-color</a> in one declaration.
	Omitted values are set to their initial values.</p>
   <p class="note" role="note">Note that <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position①">text-emphasis-position</a> is not reset in this
	shorthand. This is because typically the shape and color vary, but the
	position is consistent for a particular language throughout the document.
	Therefore the position should inherit independently. </p>
   <h3 class="heading settled" data-level="3.4" id="text-emphasis-position-property"><span class="secno">3.4. </span><span class="content"> Emphasis Mark Position: the <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position②">text-emphasis-position</a> property</span><a class="self-link" href="#text-emphasis-position-property"></a></h3>
   <table class="def propdef" data-link-for-hint="text-emphasis-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-emphasis-position">text-emphasis-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ over <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> under ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a> [ right <span id="ref-for-comb-one①⑤">|</span> left ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>over right 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword(s) 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property describes where emphasis marks are drawn at.
	If <span class="css">[ right | left ]</span> is omitted, it defaults to <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-position-right" id="ref-for-valdef-text-emphasis-position-right">right</a>.
	The values have following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-over">over<a class="self-link" href="#valdef-text-emphasis-position-over"></a></dfn> 
    <dd>Draw marks over the text in horizontal <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode⑨">typographic modes</a>. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-under">under<a class="self-link" href="#valdef-text-emphasis-position-under"></a></dfn> 
    <dd>Draw marks under the text in horizontal <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①⓪">typographic modes</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-right">right</dfn> 
    <dd>Draw marks to the right of the text in vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①①">typographic modes</a>. 
    <dt><dfn class="css" data-dfn-for="text-emphasis-position" data-dfn-type="value" data-export id="valdef-text-emphasis-position-left">left<a class="self-link" href="#valdef-text-emphasis-position-left"></a></dfn> 
    <dd>Draw marks to the left of the text in vertical <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①②">typographic modes</a>. 
   </dl>
   <p>Emphasis marks are drawn exactly as if each character was
	assigned the mark as its ruby annotation text with the ruby position
	given by <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position③">text-emphasis-position</a> and the ruby alignment as centered.
	Note that this position may be adjusted if it would conflict
	with underline or overline decorations.</p>
   <p>The effect of emphasis marks on the line height is the same as for
	ruby text.</p>
   <div class="note" role="note">
     Note, the preferred position of emphasis marks depends on the
		language. In Japanese for example, the preferred position is <span class="css">over right</span>. In Chinese, on the other hand, the preferred
		position is <span class="css">under right</span>.
		The informative table below summarizes the preferred
		emphasis mark positions for Chinese and Japanese: 
    <table class="data">
     <caption>Preferred emphasis mark and ruby position</caption>
     <thead>
      <tr>
       <th rowspan="2" scope="col">Language 
       <th colspan="2" scope="col">Preferred position 
       <th colspan="2" rowspan="2" scope="col">Illustration 
      <tr>
       <th>Horizontal 
       <th>Vertical 
     <tbody>
      <tr>
       <th scope="row">Japanese 
       <td rowspan="3">over 
       <td rowspan="3">right 
       <td rowspan="3"> <img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." height="39" src="images/text-emphasis-ja.png" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text" width="209"> 
       <td rowspan="4"> <img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." height="79" src="images/text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text" width="34"> 
      <tr>
       <th scope="row">Korean 
      <tr>
       <th scope="row">Mongolian 
      <tr>
       <th scope="row">Chinese 
       <td>under 
       <td>right 
       <td> <img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." height="39" src="images/text-emphasis-zh.png" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text" width="140"> 
    </table>
   </div>
   <p>If emphasis marks are applied to characters
	for which ruby is drawn in the same position as the emphasis mark,
	the emphasis marks are placed outside the ruby.
	This includes <a href="https://www.w3.org/TR/css-ruby-1/#autohide">auto-hidden</a> and empty <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box" id="ref-for-ruby-annotation-box">ruby annotations</a>.</p>
   <div class="figure">
     <img alt="In this example, emphasis marks are applied to 4 characters, two of which have ruby.
		       The dots are placed above each character (aligned with the ruby) for the bare characters,
		       and above the ruby text for the annotated characters." height="50" src="images/text-emphasis-ruby.png" width="134"> 
    <p class="caption">Emphasis marks applied to 4 characters, with ruby also on 2 of them </p>
   </div>
   <div class="example" id="example-47f78eba">
    <a class="self-link" href="#example-47f78eba"></a> Some editors prefer to hide emphasis marks when they conflict with ruby.
		In HTML, this can be done with the following style rule: 
<pre>ruby { text-emphasis: none; }</pre>
    <p>Some other editors prefer to hide ruby when they conflict with emphasis marks.
		In HTML, this can be done with the following pattern:</p>
<pre>em { text-emphasis: dot; } /* Set text-emphasis for &lt;em> elements */
em rt { display: none; }   /* Hide ruby inside &lt;em> elements */
</pre>
   </div>
   <h2 class="heading settled" data-level="4" id="text-shadow-property"><span class="secno">4. </span><span class="content"> Text Shadows: the <a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow①">text-shadow</a> property</span><a class="self-link" href="#text-shadow-property"></a></h2>
   <table class="def propdef" data-link-for-hint="text-shadow">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-shadow">text-shadow</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> [ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all①">&amp;&amp;</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{2,3}</a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>either the keyword <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#box-shadow-none" id="ref-for-box-shadow-none">none</a> or
a list, each item consisting of three absolute lengths
plus a computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value,
treating <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#box-shadow-none" id="ref-for-box-shadow-none①">none</a> as a zero-item list
and appending blank shadows (<span class="css">transparent 0 0 0</span>)
as needed to match the longer list
if the the shorter list is otherwise compatible with the longer one 
   </table>
   <p>This property accepts a comma-separated list of shadow effects
	to be applied to the text of the element.
	Values are interpreted as for <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]</a>.
	(But note that spread values and the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#shadow-inset" id="ref-for-shadow-inset">inset</a> keyword are not allowed.)
	Each layer shadows the element’s text and all its text decorations
	(composited together).
	If the color of the shadow is not specified,
	it defaults to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①">currentColor</a>,
	i.e. the shadow’s color is taken from the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-color/#color0" id="ref-for-color0③">color</a> property.</p>
   <p>The shadow effects are applied front-to-back:
	the first shadow is on top.
	The shadows may thus overlay each other,
	but they never overlay the text itself.
	The shadow must be painted at a stack level
	between the element’s border and/or background (if present)
	and the elements text and text decoration.
	UAs should avoid painting text shadows over text
	in adjacent elements belonging to the same stack level and stacking context.
	(This may mean that the exact stack level of the shadows depends
	on whether the element has a border or background:
	the exact stacking behavior of text shadows is thus UA-defined.)
	It is undefined whether a given shadow layer shadows
	each glyph or decoration independently
	or if the text and/or decorations are flattened and then shadowed.</p>
   <p>Unlike <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-box-shadow" id="ref-for-propdef-box-shadow①">box-shadow</a>, text shadows are not clipped to the shadowed shape
	and may show through if the text is partially-transparent.
	Like <span class="property" id="ref-for-propdef-box-shadow②">box-shadow</span>, text shadows do not influence layout,
	and do not trigger scrolling
	or increase the size of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow region</a>.</p>
   <p class="note" role="note"><span>Note:</span> The painting order of shadows defined here is the opposite
	of that defined in the 1998 <a href="https://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.</p>
   <p>The <span class="css">text-shadow</span> property applies to both the <code>::first-line</code> and <code>::first-letter</code> pseudo-elements.</p>
   <h2 class="heading settled" data-level="5" id="painting"><span class="secno">5. </span><span class="content"> Painting Text Decorations</span><a class="self-link" href="#painting"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="painting-order"><span class="secno">5.1. </span><span class="content"> Painting Order of Text Decorations</span><a class="self-link" href="#painting-order"></a></h3>
   <p>As in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>, text decorations are drawn immediately over/under the text they decorate,
	in the following order (bottommost first):</p>
   <ul>
    <li>shadows (<a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow②">text-shadow</a>) 
    <li>underlines (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration④">text-decoration</a>) 
    <li>overlines (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration⑤">text-decoration</a>) 
    <li>text 
    <li>emphasis marks (<a class="property" data-link-type="propdesc" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis②">text-emphasis</a>) 
    <li>line-through (<a class="property" data-link-type="propdesc" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration⑥">text-decoration</a>) 
   </ul>
   <p>Where line decorations are drawn across box decorations or atomic inlines,
	they are drawn over non-positioned content and just below any positioned descendants
	(immediately below layer #8 in CSS2.1 Appendix E).</p>
   <h3 class="heading settled" data-level="5.2" id="overflow"><span class="secno">5.2. </span><span class="content"> Overflow of Text Decorations</span><a class="self-link" href="#overflow"></a></h3>
   <p>Text decorations that leak outside a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#css-box" id="ref-for-css-box①">box</a> are considered <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow">ink overflow</a>:
	they do not extend the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region①">scrollable overflow region</a>. <a data-link-type="biblio" href="#biblio-css-overflow-3">[css-overflow-3]</a></p>
   <h2 class="no-num heading settled" id="acknowledgements"><span class="content"> Appendix A: Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>This specification would not have been possible without the help from:
	Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
	Martin Dürst,
	Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian
	Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
	Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
	Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki,
	Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki,
	Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe
	and Steve Zilles.</p>
   <h2 class="no-num heading settled" id="default-stylesheet"><span class="content"> Appendix B: Default UA Stylesheet</span><a class="self-link" href="#default-stylesheet"></a></h2>
   <p>This appendix is informative,
	and is to help UA developers to implement default stylesheet,
	but UA developers are free to ignore or change.</p>
   <div class="example" id="example-a9219bae">
    <a class="self-link" href="#example-a9219bae"></a> 
<pre><code class="css">/* typical styling of HTML */
blink {
  text-decoration-line: blink;
}
s, strike, del {
  text-decoration: line-through;
}
u, ins, :link, :visited {
  text-decoration: underline;
}
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* disable inheritance of text-emphasis marks to ruby text:
  emphasis marks should only apply to base text */
rt { text-emphasis: none; }

/* set language-appropriate default emphasis mark position */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* set language-appropriate default underline position */
:root:lang(ja), [lang|=ja],
:root:lang(mn), [lang|=mn],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left;  }
/* auto is chosen (implied) above instead of under
   due to content-compatibility concerns */
</code></pre>
   </div>
   <p class="issue" id="issue-4a420eee"><a class="self-link" href="#issue-4a420eee"></a> If you find any issues, recommendations to add, or corrections,
		please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> with <kbd>[css-text-decor]</kbd> in the subject line. </p>
   <div class="example" id="example-ef2cba97">
    <a class="self-link" href="#example-ef2cba97"></a> While <a class="css" data-link-type="propdesc" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line④">text-decoration-line: blink</a> can’t be fully reproduced with other existing properties,
		authors can achieve a very similar effect with the following CSS: 
<pre>@keyframes blink {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
blink {
  animation: blink 1s infinite;
}
</pre>
   </div>
   <h2 class="no-num heading settled" id="changes"><span class="content">Appendix C:
Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="no-num heading settled" id="changes-2018"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/">July 2018 Candidate Recommendation</a></span><a class="self-link" href="#changes-2018"></a></h3>
   <p>Changes include:</p>
   <ul>
    <li>Clarified that text decoration overflow is <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow①">ink overflow</a>.
		(<a href="https://github.com/w3c/csswg-drafts/issues/3272">Issue 3272</a>) 
    <li>Fixed inconsistencies in sample <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑥">text-underline-position</a> rules.
		(<a href="https://github.com/w3c/csswg-drafts/issues/3441">Issue 3441</a>) 
    <li>Cleaned up “Computed value” lines to match new conventions. 
   </ul>
   <p>A <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2018">Disposition of Comments</a> is available.</p>
   <h3 class="no-num heading settled" id="changes-2013"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/">August 2013 Candidate Recommendation</a></span><a class="self-link" href="#changes-2013"></a></h3>
   <p>Significant changes include:</p>
   <ul>
    <li>Deferred <span class="css">text-decoration-skip</span> to Level 4 to allow for major changes.
			Defined behavioral defaults in prose.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-1">Issue 1</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-22">Issue 22</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-26">Issue 26</a>) 
    <li>Specified that line-throughs are unaffected by ink-skipping feature.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-24">Issue 24</a>) 
    <li>Recommended that when ink is skipped, line endings conform to the glyph shape.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-30">Issue 30</a>) 
    <li>Updated writing-mode–sensitive conditions to depend on <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode" id="ref-for-typographic-mode①③">typographic mode</a>,
			to account for addition of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr">sideways-lr</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl">sideways-rl</a> values to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> property.
			Marked orientation of emphasis marks under <span class="css" id="ref-for-valdef-writing-mode-sideways-lr①">sideways-lr</span> and <span class="css" id="ref-for-valdef-writing-mode-sideways-rl①">sideways-rl</span> undefined.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-10">Issue 10</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-20">Issue 20</a>) 
    <li>Made <span class="css">[ right | left ]</span> option of <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position④">text-emphasis-position</a> optional,
			defaulting to <a class="css" data-link-type="maybe" href="#valdef-text-emphasis-position-right" id="ref-for-valdef-text-emphasis-position-right①">right</a>.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-17">Issue 17</a>) 
    <li>Made <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑦">text-underline-position</a> imply <a class="css" data-link-type="maybe" href="#underline-auto" id="ref-for-underline-auto①">auto</a> instead of <a class="css" data-link-type="maybe" href="#underline-under" id="ref-for-underline-under⑤">under</a> when only <a class="css" data-link-type="maybe" href="#underline-left" id="ref-for-underline-left④">left</a> or <a class="css" data-link-type="maybe" href="#underline-right" id="ref-for-underline-right④">right</a> is specified.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-18">Issue 18</a>) 
    <li>Changed text decoration to skip leading and trailing spaces.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-6">Issue 6</a>) 
    <li>Noted that the positions of ruby annotations may be adjusted
			to avoid conflicts with text decorations.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-21">Issue 21</a>) 
    <li>Changed initial value of <a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow③">text-shadow</a> to be <code>currentColor</code>.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-28">Issue 28</a>) 
    <li>Fixed error in “Computed value” line for <a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow④">text-shadow</a>.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-7">Issue 7</a>) 
    <li>Fixed canonical order of <a class="property" data-link-type="propdesc" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow⑤">text-shadow</a> values to match implementations.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-35">Issue 35</a>) 
    <li>
     Defined positioning of emphasis marks with respect to auto-hidden and empty ruby annotations.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-9">Issue 9</a>) 
     <blockquote>
       If emphasis marks are applied to characters
				for which ruby is drawn in the same position as the emphasis mark,
				the emphasis marks are placed outside the ruby. 
      <ins>This includes <a href="https://www.w3.org/TR/css-ruby-1/#autohide">auto-hidden</a> and empty <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box" id="ref-for-ruby-annotation-box①">ruby annotations</a>.</ins>
     </blockquote>
    <li>Made <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis③">text-emphasis</a> skip punctuation by default.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-16">Issue 16</a>) 
    <li>Added rule to apply <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby" id="ref-for-valdef-font-variant-east-asian-ruby①">ruby</a> to emphasis marks' font.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-13">Issue 13</a>) 
    <li>Various corrections and improvements to the default UA rules
			for <a class="property" data-link-type="propdesc" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position⑤">text-emphasis-position</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑧">text-underline-position</a>.
			(<a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-11">Issue 11</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-12">Issue 12</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-18">Issue 18</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-19">Issue 19</a>, <a href="https://drafts.csswg.org/css-text-decor-3/issues-cr-2013#issue-36">Issue 36</a>) 
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
        for implementing CSS responsibly,
        in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
        (and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
        any at-rules, properties, property values, keywords, and other syntactic constructs
        for which they have no usable level of support</strong>.
        In particular, user agents <em>must not</em> selectively ignore
        unsupported property values and honor supported values in a single multi-value property declaration:
        if any value is considered invalid (as unsupported values must be),
        CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
        implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
        of any CR-level feature they can demonstrate
        to be correctly implemented according to spec,
        and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
        implementations, the CSS Working Group requests that non-experimental
        CSS renderers submit an implementation report (and, if necessary, the
        testcases used for that implementation report) to the W3C before
        releasing an unprefixed implementation of any CSS features. Testcases
        submitted to W3C are subject to review and correction by the CSS
        Working Group. </p>
  <p>Further information on submitting testcases and implementation reports
        can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
        Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. </p>
  <h3 class="no-ref heading settled" id="cr-exit-criteria"><span class="content"> CR exit criteria</span><a class="self-link" href="#cr-exit-criteria"></a></h3>
  <p> For this specification to be advanced to Proposed Recommendation,
    there must be at least two independent, interoperable implementations
    of each feature. Each feature may be implemented by a different set of
    products, there is no requirement that all features be implemented by
    a single product. For the purposes of this criterion, we define the
    following terms: </p>
  <dl>
   <dt>independent 
   <dd>each implementation must be developed by a
        different party and cannot share, reuse, or derive from code
        used by another qualifying implementation. Sections of code that
        have no bearing on the implementation of this specification are
        exempt from this requirement. 
   <dt>interoperable 
   <dd>passing the respective test case(s) in the
        official CSS test suite, or, if the implementation is not a Web
        browser, an equivalent test. Every relevant test in the test
        suite should have an equivalent test created if such a user
        agent (UA) is to be used to claim interoperability. In addition
        if such a UA is to be used to claim interoperability, then there
        must one or more additional UAs which can also pass those
        equivalent tests in the same way for the purpose of
        interoperability. The equivalent tests must be made publicly
        available for the purposes of peer review. 
   <dt>implementation 
   <dd>
    a user agent which: 
    <ol class="inline">
     <li>implements the specification. 
     <li>is available to the general public. The implementation may
            be a shipping product or other publicly available version
            (i.e., beta version, preview release, or "nightly build").
            Non-shipping product releases must have implemented the
            feature(s) for a period of at least one month in order to
            demonstrate stability. 
     <li>is not experimental (i.e., a version specifically designed
            to pass the test suite and is not intended for normal usage
            going forward). 
    </ol>
  </dl>
  <p>
   The specification will remain Candidate Recommendation for at least
    six months. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#underline-auto">auto</a><span>, in §2.5</span>
   <li><a href="#valdef-text-decoration-line-blink">blink</a><span>, in §2.1</span>
   <li><a href="#character">character</a><span>, in §1.3</span>
   <li><a href="#valdef-text-emphasis-style-circle">circle</a><span>, in §3.1</span>
   <li><a href="#content-language">content language</a><span>, in §1.3</span>
   <li><a href="#decorating-box">decorating box</a><span>, in §2</span>
   <li><a href="#valdef-text-emphasis-style-dot">dot</a><span>, in §3.1</span>
   <li><a href="#valdef-text-emphasis-style-double-circle">double-circle</a><span>, in §3.1</span>
   <li><a href="#valdef-text-emphasis-style-filled">filled</a><span>, in §3.1</span>
   <li>
    left
    <ul>
     <li><a href="#valdef-text-emphasis-position-left">value for text-emphasis-position</a><span>, in §3.4</span>
     <li><a href="#underline-left">value for text-underline-position</a><span>, in §2.5</span>
    </ul>
   <li><a href="#letter">letter</a><span>, in §1.3</span>
   <li><a href="#valdef-text-decoration-line-line-through">line-through</a><span>, in §2.1</span>
   <li>
    none
    <ul>
     <li><a href="#valdef-text-decoration-line-none">value for text-decoration-line</a><span>, in §2.1</span>
     <li><a href="#valdef-text-emphasis-style-none">value for text-emphasis-style</a><span>, in §3.1</span>
    </ul>
   <li><a href="#valdef-text-text-emphasis-open">open</a><span>, in §3.1</span>
   <li><a href="#valdef-text-emphasis-position-over">over</a><span>, in §3.4</span>
   <li><a href="#valdef-text-decoration-line-overline">overline</a><span>, in §2.1</span>
   <li>
    right
    <ul>
     <li><a href="#valdef-text-emphasis-position-right">value for text-emphasis-position</a><span>, in §3.4</span>
     <li><a href="#underline-right">value for text-underline-position</a><span>, in §2.5</span>
    </ul>
   <li><a href="#valdef-text-emphasis-style-sesame">sesame</a><span>, in §3.1</span>
   <li><a href="#valdef-text-emphasis-style-string">&lt;string></a><span>, in §3.1</span>
   <li><a href="#propdef-text-decoration">text-decoration</a><span>, in §2.4</span>
   <li><a href="#propdef-text-decoration-color">text-decoration-color</a><span>, in §2.3</span>
   <li><a href="#propdef-text-decoration-line">text-decoration-line</a><span>, in §2.1</span>
   <li><a href="#propdef-text-decoration-style">text-decoration-style</a><span>, in §2.2</span>
   <li><a href="#propdef-text-emphasis">text-emphasis</a><span>, in §3.3</span>
   <li><a href="#propdef-text-emphasis-color">text-emphasis-color</a><span>, in §3.2</span>
   <li><a href="#propdef-text-emphasis-position">text-emphasis-position</a><span>, in §3.4</span>
   <li><a href="#propdef-text-emphasis-style">text-emphasis-style</a><span>, in §3.1</span>
   <li><a href="#propdef-text-shadow">text-shadow</a><span>, in §4</span>
   <li><a href="#propdef-text-underline-position">text-underline-position</a><span>, in §2.5</span>
   <li><a href="#valdef-text-emphasis-style-triangle">triangle</a><span>, in §3.1</span>
   <li>
    under
    <ul>
     <li><a href="#valdef-text-emphasis-position-under">value for text-emphasis-position</a><span>, in §3.4</span>
     <li><a href="#underline-under">value for text-underline-position</a><span>, in §2.5</span>
    </ul>
   <li><a href="#valdef-text-decoration-line-underline">underline</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-box-shadow">
   <a href="https://www.w3.org/TR/css3-background/#propdef-box-shadow">https://www.w3.org/TR/css3-background/#propdef-box-shadow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-shadow">4. 
Text Shadows: the text-shadow property</a> <a href="#ref-for-propdef-box-shadow①">(2)</a> <a href="#ref-for-propdef-box-shadow②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shadow-inset">
   <a href="https://www.w3.org/TR/css3-background/#shadow-inset">https://www.w3.org/TR/css3-background/#shadow-inset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shadow-inset">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box-shadow-none">
   <a href="https://www.w3.org/TR/css3-background/#box-shadow-none">https://www.w3.org/TR/css3-background/#box-shadow-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-shadow-none">4. 
Text Shadows: the text-shadow property</a> <a href="#ref-for-box-shadow-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://www.w3.org/TR/css3-break/#fragment">https://www.w3.org/TR/css3-break/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://www.w3.org/TR/css3-color/#valuea-def-color">https://www.w3.org/TR/css3-color/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">2.3. 
Text Decoration Color: the text-decoration-color property</a>
    <li><a href="#ref-for-valuea-def-color①">3.2. 
Emphasis Mark Color: the text-emphasis-color property</a>
    <li><a href="#ref-for-valuea-def-color②">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-color0">
   <a href="https://www.w3.org/TR/css3-color/#color0">https://www.w3.org/TR/css3-color/#color0</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-color0">3.2. 
Emphasis Mark Color: the text-emphasis-color property</a> <a href="#ref-for-color0①">(2)</a> <a href="#ref-for-color0②">(3)</a>
    <li><a href="#ref-for-color0③">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-currentcolor">
   <a href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor">https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-currentcolor">3.2. 
Emphasis Mark Color: the text-emphasis-color property</a>
    <li><a href="#ref-for-valdef-color-currentcolor①">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-anonymous">
   <a href="https://www.w3.org/TR/css-display-3/#css-anonymous">https://www.w3.org/TR/css-display-3/#css-anonymous</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-anonymous">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-atomic-inline">
   <a href="https://www.w3.org/TR/css-display-3/#atomic-inline">https://www.w3.org/TR/css-display-3/#atomic-inline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-atomic-inline">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://www.w3.org/TR/css-display-3/#block-container">https://www.w3.org/TR/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">2. 
Line Decoration: Underline, Overline, and Strike-Through</a> <a href="#ref-for-block-container①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-level">
   <a href="https://www.w3.org/TR/css-display-3/#block-level">https://www.w3.org/TR/css-display-3/#block-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-level">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-box">
   <a href="https://www.w3.org/TR/css-display-3/#css-box">https://www.w3.org/TR/css-display-3/#css-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-box">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
    <li><a href="#ref-for-css-box①">5.2. 
Overflow of Text Decorations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://www.w3.org/TR/css-display-3/#propdef-display">https://www.w3.org/TR/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-flow">
   <a href="https://www.w3.org/TR/css-display-3/#in-flow">https://www.w3.org/TR/css-display-3/#in-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-flow">2. 
Line Decoration: Underline, Overline, and Strike-Through</a> <a href="#ref-for-in-flow①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-box">
   <a href="https://www.w3.org/TR/css-display-3/#inline-box">https://www.w3.org/TR/css-display-3/#inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-box">2. 
Line Decoration: Underline, Overline, and Strike-Through</a> <a href="#ref-for-inline-box①">(2)</a> <a href="#ref-for-inline-box②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-formatting-context">
   <a href="https://www.w3.org/TR/css-display-3/#inline-formatting-context">https://www.w3.org/TR/css-display-3/#inline-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-formatting-context">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-level">
   <a href="https://www.w3.org/TR/css-display-3/#inline-level">https://www.w3.org/TR/css-display-3/#inline-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-non-replaced">
   <a href="https://www.w3.org/TR/css-display-3/#non-replaced">https://www.w3.org/TR/css-display-3/#non-replaced</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-non-replaced">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-variant-position">
   <a href="https://www.w3.org/TR/css-fonts-3/#propdef-font-variant-position">https://www.w3.org/TR/css-fonts-3/#propdef-font-variant-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-variant-position">2.5. 
Text Underline Position: the text-underline-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-font-variant-east-asian-ruby">
   <a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby">https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-font-variant-east-asian-ruby">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
    <li><a href="#ref-for-valdef-font-variant-east-asian-ruby①"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-vertical-align">
   <a href="https://www.w3.org/TR/css-inline-3/#propdef-vertical-align">https://www.w3.org/TR/css-inline-3/#propdef-vertical-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-vertical-align">2.5. 
Text Underline Position: the text-underline-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ink-overflow">
   <a href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">https://www.w3.org/TR/css-overflow-3/#ink-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ink-overflow">5.2. 
Overflow of Text Decorations</a>
    <li><a href="#ref-for-ink-overflow①"> Changes since the July 2018 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollable-overflow-region">
   <a href="https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region">https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollable-overflow-region">4. 
Text Shadows: the text-shadow property</a>
    <li><a href="#ref-for-scrollable-overflow-region①">5.2. 
Overflow of Text Decorations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-annotation-box">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box">https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-annotation-box">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a>
    <li><a href="#ref-for-ruby-annotation-box①"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-base-box">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-base-box">https://drafts.csswg.org/css-ruby-1/#ruby-base-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-base-box">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-container">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-container">https://drafts.csswg.org/css-ruby-1/#ruby-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-container">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unicode-general-category">
   <a href="https://www.w3.org/TR/css-text-3/#unicode-general-category">https://www.w3.org/TR/css-text-3/#unicode-general-category</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unicode-general-category">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typographic-character-unit">
   <a href="https://www.w3.org/TR/css-text-3/#typographic-character-unit">https://www.w3.org/TR/css-text-3/#typographic-character-unit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typographic-character-unit">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://www.w3.org/TR/css3-values/#length-value">https://www.w3.org/TR/css3-values/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://www.w3.org/TR/css3-values/#string-value">https://www.w3.org/TR/css3-values/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-string-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://www.w3.org/TR/css-values-4/#mult-comma">https://www.w3.org/TR/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://www.w3.org/TR/css-values-4/#comb-all">https://www.w3.org/TR/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a>
    <li><a href="#ref-for-comb-all①">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://www.w3.org/TR/css-values-4/#mult-opt">https://www.w3.org/TR/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a>
    <li><a href="#ref-for-mult-opt①">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://www.w3.org/TR/css-values-4/#css-wide-keywords">https://www.w3.org/TR/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.2. 
Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://www.w3.org/TR/css-values-4/#mult-num-range">https://www.w3.org/TR/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Text Decoration Lines: the text-decoration-line property</a>
    <li><a href="#ref-for-comb-one①">2.2. 
Text Decoration Style: the text-decoration-style property</a> <a href="#ref-for-comb-one②">(2)</a> <a href="#ref-for-comb-one③">(3)</a> <a href="#ref-for-comb-one④">(4)</a>
    <li><a href="#ref-for-comb-one⑤">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-comb-one⑥">(2)</a>
    <li><a href="#ref-for-comb-one⑦">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-comb-one⑧">(2)</a> <a href="#ref-for-comb-one⑨">(3)</a> <a href="#ref-for-comb-one①⓪">(4)</a> <a href="#ref-for-comb-one①①">(5)</a> <a href="#ref-for-comb-one①②">(6)</a> <a href="#ref-for-comb-one①③">(7)</a>
    <li><a href="#ref-for-comb-one①④">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a> <a href="#ref-for-comb-one①⑤">(2)</a>
    <li><a href="#ref-for-comb-one①⑥">4. 
Text Shadows: the text-shadow property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://www.w3.org/TR/css-values-4/#comb-any">https://www.w3.org/TR/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">2.1. 
Text Decoration Lines: the text-decoration-line property</a> <a href="#ref-for-comb-any①">(2)</a> <a href="#ref-for-comb-any②">(3)</a>
    <li><a href="#ref-for-comb-any③">2.4. 
Text Decoration Shorthand: the text-decoration property</a> <a href="#ref-for-comb-any④">(2)</a>
    <li><a href="#ref-for-comb-any⑤">2.5. 
Text Underline Position: the text-underline-position property</a>
    <li><a href="#ref-for-comb-any⑥">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
    <li><a href="#ref-for-comb-any⑦">3.3. 
Emphasis Mark Shorthand: the text-emphasis property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-sideways-lr">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-lr">https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-lr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr"> Changes since the August 2013 Candidate Recommendation</a> <a href="#ref-for-valdef-writing-mode-sideways-lr①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-writing-mode-sideways-rl">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-rl">https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-rl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-sideways-rl"> Changes since the August 2013 Candidate Recommendation</a> <a href="#ref-for-valdef-writing-mode-sideways-rl①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typographic-mode">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#typographic-mode">https://www.w3.org/TR/css-writing-modes-4/#typographic-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typographic-mode">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-typographic-mode①">(2)</a> <a href="#ref-for-typographic-mode②">(3)</a> <a href="#ref-for-typographic-mode③">(4)</a> <a href="#ref-for-typographic-mode④">(5)</a>
    <li><a href="#ref-for-typographic-mode⑤">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-typographic-mode⑥">(2)</a> <a href="#ref-for-typographic-mode⑦">(3)</a> <a href="#ref-for-typographic-mode⑧">(4)</a>
    <li><a href="#ref-for-typographic-mode⑨">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a> <a href="#ref-for-typographic-mode①⓪">(2)</a> <a href="#ref-for-typographic-mode①①">(3)</a> <a href="#ref-for-typographic-mode①②">(4)</a>
    <li><a href="#ref-for-typographic-mode①③"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-under">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#under">https://www.w3.org/TR/css-writing-modes-4/#under</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-under">2.5. 
Text Underline Position: the text-underline-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-vertical-writing-mode">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode">https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-writing-mode">2.1. 
Text Decoration Lines: the text-decoration-line property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#writing-mode">https://www.w3.org/TR/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode">https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-visibility">
   <a href="https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility">https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-visibility">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-del-element">
   <a href="https://html.spec.whatwg.org/multipage/edits.html#the-del-element">https://html.spec.whatwg.org/multipage/edits.html#the-del-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-del-element">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-ins-element">
   <a href="https://html.spec.whatwg.org/multipage/edits.html#the-ins-element">https://html.spec.whatwg.org/multipage/edits.html#the-ins-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-ins-element">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-box-shadow" style="color:initial">box-shadow</span>
     <li><span class="dfn-paneled" id="term-for-shadow-inset" style="color:initial">inset</span>
     <li><span class="dfn-paneled" id="term-for-box-shadow-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
     <li><span class="dfn-paneled" id="term-for-color0" style="color:initial">color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-color-currentcolor" style="color:initial">currentcolor</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-anonymous" style="color:initial">anonymous</span>
     <li><span class="dfn-paneled" id="term-for-atomic-inline" style="color:initial">atomic inline</span>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-block-level" style="color:initial">block-level</span>
     <li><span class="dfn-paneled" id="term-for-css-box" style="color:initial">box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-in-flow" style="color:initial">in-flow</span>
     <li><span class="dfn-paneled" id="term-for-inline-box" style="color:initial">inline box</span>
     <li><span class="dfn-paneled" id="term-for-inline-formatting-context" style="color:initial">inline formatting context</span>
     <li><span class="dfn-paneled" id="term-for-inline-level" style="color:initial">inline-level</span>
     <li><span class="dfn-paneled" id="term-for-non-replaced" style="color:initial">non-replaced</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-FONTS-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-variant-position" style="color:initial">font-variant-position</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-font-variant-east-asian-ruby" style="color:initial">ruby</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-vertical-align" style="color:initial">vertical-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-ink-overflow" style="color:initial">ink overflow</span>
     <li><span class="dfn-paneled" id="term-for-scrollable-overflow-region" style="color:initial">scrollable overflow region</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-ruby-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-ruby-annotation-box" style="color:initial">ruby annotation</span>
     <li><span class="dfn-paneled" id="term-for-ruby-base-box" style="color:initial">ruby base</span>
     <li><span class="dfn-paneled" id="term-for-ruby-container" style="color:initial">ruby container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-unicode-general-category" style="color:initial">general category</span>
     <li><span class="dfn-paneled" id="term-for-typographic-character-unit" style="color:initial">typographic character unit</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-VALUES-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-sideways-lr" style="color:initial">sideways-lr</span>
     <li><span class="dfn-paneled" id="term-for-valdef-writing-mode-sideways-rl" style="color:initial">sideways-rl</span>
     <li><span class="dfn-paneled" id="term-for-typographic-mode" style="color:initial">typographic mode</span>
     <li><span class="dfn-paneled" id="term-for-under" style="color:initial">under</span>
     <li><span class="dfn-paneled" id="term-for-vertical-writing-mode" style="color:initial">vertical writing mode</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-visibility" style="color:initial">visibility</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-del-element" style="color:initial">del</span>
     <li><span class="dfn-paneled" id="term-for-the-ins-element" style="color:initial">ins</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-ruby-1">[CSS-RUBY-1]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-ruby-1/">CSS Ruby Layout Module Level 1</a>. 5 August 2014. WD. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-uax15">[UAX15]
   <dd>Ken Whistler. <a href="https://www.unicode.org/reports/tr15/tr15-48.html">Unicode Normalization Forms</a>. 4 February 2019. Unicode Standard Annex #15. URL: <a href="https://www.unicode.org/reports/tr15/tr15-48.html">https://www.unicode.org/reports/tr15/tr15-48.html</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration" id="ref-for-propdef-text-decoration⑦">text-decoration</a>
      <td>&lt;'text-decoration-line'> || &lt;'text-decoration-style'> || &lt;'text-decoration-color'>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-color" id="ref-for-propdef-text-decoration-color④">text-decoration-color</a>
      <td>&lt;color>
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-line" id="ref-for-propdef-text-decoration-line⑤">text-decoration-line</a>
      <td>none | [ underline || overline || line-through || blink ]
      <td>none
      <td>all elements
      <td>no (but see prose, above)
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-decoration-style" id="ref-for-propdef-text-decoration-style④">text-decoration-style</a>
      <td>solid | double | dotted | dashed | wavy
      <td>solid
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis" id="ref-for-propdef-text-emphasis④">text-emphasis</a>
      <td>&lt;'text-emphasis-style'> || &lt;'text-emphasis-color'>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color⑤">text-emphasis-color</a>
      <td>&lt;color>
      <td>currentcolor
      <td>all elements
      <td>yes
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-position" id="ref-for-propdef-text-emphasis-position⑥">text-emphasis-position</a>
      <td>[ over | under ] &amp;&amp; [ right | left ]?
      <td>over right
      <td>all elements
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-emphasis-style" id="ref-for-propdef-text-emphasis-style④">text-emphasis-style</a>
      <td>none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | &lt;string>
      <td>none
      <td>all elements
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>the keyword none, a pair of keywords representing the shape and fill, or a string
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-shadow" id="ref-for-propdef-text-shadow⑥">text-shadow</a>
      <td>none | [ &lt;color>? &amp;&amp; &lt;length>{2,3} ]#
      <td>none
      <td>all elements
      <td>yes
      <td>n/a
      <td>by computed value,
treating none as a zero-item list
and appending blank shadows (transparent 0 0 0)
as needed to match the longer list
if the the shorter list is otherwise compatible with the longer one
      <td>per grammar
      <td>either the keyword none or
a list, each item consisting of three absolute lengths
plus a computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-underline-position" id="ref-for-propdef-text-underline-position⑨">text-underline-position</a>
      <td>auto | [ under || [ left | right ] ]
      <td>auto
      <td>all elements
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword(s)
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> If you find any issues, recommendations to add, or corrections,
		please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a> with <kbd>[css-text-decor]</kbd> in the subject line. <a href="#issue-4a420eee"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="character">
   <b><a href="#character">#character</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-character">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-character①">(2)</a> <a href="#ref-for-character②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="decorating-box">
   <b><a href="#decorating-box">#decorating-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-decorating-box">2. 
Line Decoration: Underline, Overline, and Strike-Through</a> <a href="#ref-for-decorating-box①">(2)</a> <a href="#ref-for-decorating-box②">(3)</a>
    <li><a href="#ref-for-decorating-box③">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-decorating-box④">(2)</a> <a href="#ref-for-decorating-box⑤">(3)</a> <a href="#ref-for-decorating-box⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-decoration-line">
   <b><a href="#propdef-text-decoration-line">#propdef-text-decoration-line</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration-line">2.1. 
Text Decoration Lines: the text-decoration-line property</a>
    <li><a href="#ref-for-propdef-text-decoration-line①">2.3. 
Text Decoration Color: the text-decoration-color property</a>
    <li><a href="#ref-for-propdef-text-decoration-line②">2.4. 
Text Decoration Shorthand: the text-decoration property</a> <a href="#ref-for-propdef-text-decoration-line③">(2)</a>
    <li><a href="#ref-for-propdef-text-decoration-line④"> Appendix B: Default UA Stylesheet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-decoration-style">
   <b><a href="#propdef-text-decoration-style">#propdef-text-decoration-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration-style">2.2. 
Text Decoration Style: the text-decoration-style property</a>
    <li><a href="#ref-for-propdef-text-decoration-style①">2.4. 
Text Decoration Shorthand: the text-decoration property</a> <a href="#ref-for-propdef-text-decoration-style②">(2)</a> <a href="#ref-for-propdef-text-decoration-style③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-decoration-color">
   <b><a href="#propdef-text-decoration-color">#propdef-text-decoration-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration-color">2.3. 
Text Decoration Color: the text-decoration-color property</a>
    <li><a href="#ref-for-propdef-text-decoration-color①">2.4. 
Text Decoration Shorthand: the text-decoration property</a> <a href="#ref-for-propdef-text-decoration-color②">(2)</a> <a href="#ref-for-propdef-text-decoration-color③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-decoration">
   <b><a href="#propdef-text-decoration">#propdef-text-decoration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration">2.4. 
Text Decoration Shorthand: the text-decoration property</a> <a href="#ref-for-propdef-text-decoration①">(2)</a> <a href="#ref-for-propdef-text-decoration②">(3)</a>
    <li><a href="#ref-for-propdef-text-decoration③">2.5. 
Text Underline Position: the text-underline-position property</a>
    <li><a href="#ref-for-propdef-text-decoration④">5.1. 
Painting Order of Text Decorations</a> <a href="#ref-for-propdef-text-decoration⑤">(2)</a> <a href="#ref-for-propdef-text-decoration⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-underline-position">
   <b><a href="#propdef-text-underline-position">#propdef-text-underline-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-underline-position">2.1. 
Text Decoration Lines: the text-decoration-line property</a>
    <li><a href="#ref-for-propdef-text-underline-position①">2.4. 
Text Decoration Shorthand: the text-decoration property</a>
    <li><a href="#ref-for-propdef-text-underline-position②">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-propdef-text-underline-position③">(2)</a> <a href="#ref-for-propdef-text-underline-position④">(3)</a> <a href="#ref-for-propdef-text-underline-position⑤">(4)</a>
    <li><a href="#ref-for-propdef-text-underline-position⑥"> Changes since the July 2018 Candidate Recommendation</a>
    <li><a href="#ref-for-propdef-text-underline-position⑦"> Changes since the August 2013 Candidate Recommendation</a> <a href="#ref-for-propdef-text-underline-position⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="underline-auto">
   <b><a href="#underline-auto">#underline-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-underline-auto">2.5. 
Text Underline Position: the text-underline-position property</a>
    <li><a href="#ref-for-underline-auto①"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="underline-under">
   <b><a href="#underline-under">#underline-under</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-underline-under">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-underline-under①">(2)</a> <a href="#ref-for-underline-under②">(3)</a> <a href="#ref-for-underline-under③">(4)</a> <a href="#ref-for-underline-under④">(5)</a>
    <li><a href="#ref-for-underline-under⑤"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="underline-left">
   <b><a href="#underline-left">#underline-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-underline-left">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-underline-left①">(2)</a> <a href="#ref-for-underline-left②">(3)</a> <a href="#ref-for-underline-left③">(4)</a>
    <li><a href="#ref-for-underline-left④"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="underline-right">
   <b><a href="#underline-right">#underline-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-underline-right">2.5. 
Text Underline Position: the text-underline-position property</a> <a href="#ref-for-underline-right①">(2)</a> <a href="#ref-for-underline-right②">(3)</a> <a href="#ref-for-underline-right③">(4)</a>
    <li><a href="#ref-for-underline-right④"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-emphasis-style">
   <b><a href="#propdef-text-emphasis-style">#propdef-text-emphasis-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis-style">3. 
Emphasis Marks</a>
    <li><a href="#ref-for-propdef-text-emphasis-style①">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
    <li><a href="#ref-for-propdef-text-emphasis-style②">3.3. 
Emphasis Mark Shorthand: the text-emphasis property</a> <a href="#ref-for-propdef-text-emphasis-style③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-emphasis-style-none">
   <b><a href="#valdef-text-emphasis-style-none">#valdef-text-emphasis-style-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-emphasis-style-none">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-emphasis-style-filled">
   <b><a href="#valdef-text-emphasis-style-filled">#valdef-text-emphasis-style-filled</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-emphasis-style-filled">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-valdef-text-emphasis-style-filled①">(2)</a> <a href="#ref-for-valdef-text-emphasis-style-filled②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-text-emphasis-open">
   <b><a href="#valdef-text-text-emphasis-open">#valdef-text-text-emphasis-open</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-text-emphasis-open">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a> <a href="#ref-for-valdef-text-text-emphasis-open①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-emphasis-style-circle">
   <b><a href="#valdef-text-emphasis-style-circle">#valdef-text-emphasis-style-circle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-emphasis-style-circle">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-emphasis-style-sesame">
   <b><a href="#valdef-text-emphasis-style-sesame">#valdef-text-emphasis-style-sesame</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-emphasis-style-sesame">3.1. 
Emphasis Mark Style: the text-emphasis-style property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-emphasis-color">
   <b><a href="#propdef-text-emphasis-color">#propdef-text-emphasis-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis-color">3. 
Emphasis Marks</a>
    <li><a href="#ref-for-propdef-text-emphasis-color①">3.2. 
Emphasis Mark Color: the text-emphasis-color property</a> <a href="#ref-for-propdef-text-emphasis-color②">(2)</a>
    <li><a href="#ref-for-propdef-text-emphasis-color③">3.3. 
Emphasis Mark Shorthand: the text-emphasis property</a> <a href="#ref-for-propdef-text-emphasis-color④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-emphasis">
   <b><a href="#propdef-text-emphasis">#propdef-text-emphasis</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis">3. 
Emphasis Marks</a>
    <li><a href="#ref-for-propdef-text-emphasis①">3.3. 
Emphasis Mark Shorthand: the text-emphasis property</a>
    <li><a href="#ref-for-propdef-text-emphasis②">5.1. 
Painting Order of Text Decorations</a>
    <li><a href="#ref-for-propdef-text-emphasis③"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-emphasis-position">
   <b><a href="#propdef-text-emphasis-position">#propdef-text-emphasis-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis-position">3. 
Emphasis Marks</a>
    <li><a href="#ref-for-propdef-text-emphasis-position①">3.3. 
Emphasis Mark Shorthand: the text-emphasis property</a>
    <li><a href="#ref-for-propdef-text-emphasis-position②">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a> <a href="#ref-for-propdef-text-emphasis-position③">(2)</a>
    <li><a href="#ref-for-propdef-text-emphasis-position④"> Changes since the August 2013 Candidate Recommendation</a> <a href="#ref-for-propdef-text-emphasis-position⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-emphasis-position-right">
   <b><a href="#valdef-text-emphasis-position-right">#valdef-text-emphasis-position-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-emphasis-position-right">3.4. 
Emphasis Mark Position: the text-emphasis-position property</a>
    <li><a href="#ref-for-valdef-text-emphasis-position-right①"> Changes since the August 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-shadow">
   <b><a href="#propdef-text-shadow">#propdef-text-shadow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-shadow">2. 
Line Decoration: Underline, Overline, and Strike-Through</a>
    <li><a href="#ref-for-propdef-text-shadow①">4. 
Text Shadows: the text-shadow property</a>
    <li><a href="#ref-for-propdef-text-shadow②">5.1. 
Painting Order of Text Decorations</a>
    <li><a href="#ref-for-propdef-text-shadow③"> Changes since the August 2013 Candidate Recommendation</a> <a href="#ref-for-propdef-text-shadow④">(2)</a> <a href="#ref-for-propdef-text-shadow⑤">(3)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>